<template>
  <div id="light">
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  name: 'light',
  data(){
      return{
      }
  },
  methods:{
      test_light1(){
        let container = document.getElementById('light');
        let scene = new THREE.Scene();
          //球体几何对象
        let geometry = new THREE.BoxGeometry(100, 100, 100) 
        let material = new THREE.MeshLambertMaterial({
             color: 0x0000ff, //三角面颜色
            }); //材质对象
        let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中
        let axisHelper = new THREE.AxesHelper(250);
        scene.add(axisHelper); 
        //点光源
        let pointLight = new THREE.PointLight(0xffffff);
        //点光源位置
        pointLight.position.set(400, 200, 300); 
        //点光源添加到场景中
        scene.add(pointLight); 
        let PointLightHelper = new THREE.PointLightHelper(pointLight,20,0xff0000);
        scene.add(PointLightHelper);
        //环境光
        let ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        //聚光源
        // 聚光光源
        let spotLight = new THREE.SpotLight(0xffffff);
        // 设置聚光光源位置
        spotLight.position.set(200, 200, 200);
        // 聚光灯光源指向网格模型mesh2
        spotLight.target = mesh;
        // 设置聚光光源发散角度
        spotLight.angle = Math.PI / 6
        scene.add(spotLight);//光对象添加到scene场景中
        var pointLightHelper=new THREE.PointLightHelper(spotLight,20,0xff0000);
		scene.add(pointLightHelper);
        //相机系数设置
        //窗口宽度
        let width = container.clientWidth; 
        //窗口高度
        let height = container.clientHeight; 
        //窗口宽高比
        let k = width / height;
        //三维场景显示范围控制系数，系数越大，显示的范围越大 
        let s = 200; 
        //创建相机对象
        let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(250, 250, 250); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        //创建渲染器对象
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        container.appendChild(renderer.domElement); //插入canvas对象
        function render(){ 
            renderer.render(scene,camera); 
        }
        let controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
        controls.addEventListener('change', render);//监听鼠标、键盘事件 
      },
      test_shadow(){
        let container = document.getElementById('light');
        let scene = new THREE.Scene();
          //球体几何对象
        let geometry = new THREE.BoxGeometry(40, 100, 40) 
        let material = new THREE.MeshLambertMaterial({
             color: 0x0000ff, //三角面颜色
            }); //材质对象
        let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        //设置产生投影的网格模型
        mesh.castShadow = true;
        scene.add(mesh); //网格模型添加到场景中
        //创建一个几何平面作为投影面
        let planeGeometry = new THREE.PlaneGeometry(300,200);
        var planeMaterial = new THREE.MeshLambertMaterial({
          color: 0x999999
        });
        //平面网格模型作为投影面
        let planeMesh = new THREE.Mesh(planeGeometry,planeMaterial);
        scene.add(planeMesh);
        planeMesh.rotateX(-Math.PI / 2); //旋转网格模型
        planeMesh.position.y = -50; //设置网格模型y坐标
        // 设置接收阴影的投影面
        planeMesh.receiveShadow = true;
        let axisHelper = new THREE.AxesHelper(250);
        scene.add(axisHelper); 
        var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        // 设置光源位置
        directionalLight.position.set(60, 100, 40);
        scene.add(directionalLight);
        // 设置用于计算阴影的光源对象
        directionalLight.castShadow = true;
        // 设置计算阴影的区域，最好刚好紧密包围在对象周围
        // 计算阴影的区域过大：模糊  过小：看不到或显示不完整
        directionalLight.shadow.camera.near = 0.5;
        directionalLight.shadow.camera.far = 300;
        directionalLight.shadow.camera.left = -50;
        directionalLight.shadow.camera.right = 50;
        directionalLight.shadow.camera.top = 200;
        directionalLight.shadow.camera.bottom = -100;
        //相机系数设置
        //窗口宽度
        let width = container.clientWidth; 
        //窗口高度
        let height = container.clientHeight; 
        //窗口宽高比
        let k = width / height;
        //三维场景显示范围控制系数，系数越大，显示的范围越大 
        let s = 200; 
        //创建相机对象
        let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(250, 250, 250); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        //创建渲染器对象
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        container.appendChild(renderer.domElement); //插入canvas对象
        function render(){ 
            renderer.render(scene,camera); 
        }
        let controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
        controls.addEventListener('change', render);//监听鼠标、键盘事件 
      }
  }, 
  mounted () {
      //this.test_light1();
      this.test_shadow();
 }
}
</script>

<style scope>
#light{
     height: 500px;
}
</style>